<template>
  <view class="select-list-box px-3.5 box-border">
    <view class="list-box">
      <up-list
        @scrolltolower="scrolltolower"
        height="calc(100vh - 64rpx - 83rpx - 20rpx)"
      >
        <up-radio-group v-model="selectUserIds" placement="column">
          <up-list-item v-for="(item, index) in options" :key="index">
            <up-cell>
              <template #title>
                <view class="u-slot-title">
                  <text class="text-[29rpx] text-black">{{ item.name }}</text>
                </view>
              </template>
              <template #right-icon>
                <up-radio activeColor="#0189FE" :name="item.name"></up-radio>
              </template>
            </up-cell>
          </up-list-item>
        </up-radio-group>
      </up-list>
    </view>
    <view class="btm-btn">
      <button
        class="btn-0189FE h-[83rpx] leading-[83rpx] text-[33rpx]"
        @click="onsubmit"
      >
        确 认
      </button>
    </view>
    <up-toast ref="uToastRef"></up-toast>
  </view>
</template>
<script setup lang="ts">
const options = ref([
  {
    id: 1,
    name: "服务态度",
  },
  {
    id: 2,
    name: "办事效率",
  },
  {
    id: 3,
    name: "有无“吃拿卡要”行为",
  },
  {
    id: 4,
    name: "其他",
  },
]);
const selectUserIds = ref("");
const uToastRef = <any>ref(null);

const onsubmit = () => {
  if (selectUserIds.value) {
    uni.$emit("updateServiceItem", selectUserIds.value);
    uni.navigateBack({
      delta: 1,
    });
  } else {
    uToastRef.value.show({
      type: "warning",
      message: "请选择服务事项",
    });
  }
};
onLoad((options) => {
  if (options && options.itemName && options.itemName != 'undefined') {
    selectUserIds.value = options.itemName;
  }
  // loadmore();
});

const scrolltolower = () => {
  loadmore();
};

const loadmore = () => {
  console.log("加载更多");
};
</script>
<style lang="scss" scoped>
.select-list-box {
  .list-box {
    height: calc(100vh - 64rpx - 83rpx - 20rpx);
    overflow: auto;
  }
  ::v-deep .u-list-item {
    width: 100%;
  }
  ::v-deep .u-cell__body {
    padding: 16rpx 0;
  }
  ::v-deep .u-radio__icon-wrap {
    margin-right: 0;
  }
}
</style>
